<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>bootstrap-table</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7/dist/css/bootstrap.min.css">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7/dist/css/bootstrap-theme.min.css">

  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="./css/media.css" />
  <script src="./lib/jquery.min.js"></script>
  <!-- iscroll -->
  <link rel="stylesheet" href="./lib/iscroll/iscroll.css" />
  <script src="./lib/iscroll/iscroll.js"></script>
  <script src="./lib/iscroll/init.js"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="./lib/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row line-top">
      <div class="col-md-6 col-sm-8">
        <span class="sort-label">分类：</span>
        <ul id="checkboxList" class="checkbox-list">
          <li>
            <input id="111" name="财务总监" type="checkbox" value="" />
            <label for="111">财务总监</label>
          </li>
          <li>
            <input id="222" name="后备人才" type="checkbox" value="" />
            <label for="222">后备人才</label>
          </li>
          <li>
            <input id="333" name="财务经理" type="checkbox" value="" />
            <label for="333">财务经理</label>
          </li>
        </ul>
        <div class="btn btn-primary btn-md btn-sm">确定</div>
      </div>
    </div>
    <!-- table -->
    <div class="scroll-wrap">
      <div id="wrapper" class="scroll-box">
        <div id="scroller">
          <div id="pullDown" class="pull-line">
            <span class="pullDownLabel">下拉刷新</span>
            <span class="pullDownIcon icon loading-bars"></span>
          </div>
          <div class="ul-cls" id="ajaxData"></div>

          <div id="pullUp" class="pull-line">
            <span class="pullUpLabel">上拉加载更多</span>
            <span class="pullUpIcon icon loading-bars"></span>
          </div>
        </div>
      </div>

    </div>
  </div>

  <script>
    var ajaxData = document.getElementById('ajaxData')
    var list = []
    var allList = []
    var none_data = 1; //1.底部显示状态判断 0.已加载全部数据
    var paginatorData = {
      total: 'init', // 数据总条数
      size: 5, // 每页显示的条数
      number: 1 // 当前页码
    }
    $(function () {
      getList(function () {
        initScroll()
        myScroll.refresh()
      })
    })
    function getList(fn) {
      $.ajax({
        url: 'js/data.json',
        type: 'get',
        dataType: 'text',
        async: true,
        success: function (res) {
          var data = JSON.parse(res)

          var copyNum = 10
          for (; copyNum > 0; copyNum--) {
            allList = allList.concat(data.result)
          }
          list = allList.slice(0, paginatorData.size)
          ajaxData.innerHTML = printTableList(list)
          paginatorData.number = 1
          paginatorData.total = allList.length
          fn()
        },
        error: function (err) {
          console.error('err', err)
        }
      })
    }
    // 打印dom数据
    function printTableList(arr) {
      var str = ''
      arr.forEach(obj => {
        str += `
            <div class="colspan-tr">
              <div class="persional-box flex">
                <div class="box box-left flex">
                  <div class="portrait portrait icon"></div>
                  <div class="name font-ellipsis">张娅张娅</div>
                </div>
                <div class="box box-center">
                  <div class="line flex">
                    <div class="parts sex">女</div>
                    <div class="parts age">30岁</div>
                    <div class="parts adress">四川省成都市锦江区</div>
                    <div class="parts phone">
                      <i class="icon icon-phone"></i><span class="phone-num">13189019276</span>
                    </div>
                  </div>
                  <div class="line flex">
                    <div class="parts school-time">2005.09 - 2009.09</div>
                    <div class="parts school">西华师范大学</div>
                    <div class="parts major">地理信息系统</div>
                    <div class="parts degree">本科</div>
                  </div>
                </div>
                <div class="box box-right">
                  <ol type="1">`
        var li = ''
        obj.files.forEach(o => {
          li += `
          <li>
            <span class="parts file-name-w"><a href="#">张娅财务总监履职.xlsc</a></span>
            <span class="parts file-type-w">财务总监履职</span>
            <span class="parts file-w">张娅财务总监履职.xlsc</span>
          </li>
          `
        })
        li += `</ol>
            </div>
          </div>
        </div>`

        str += li
      })
      // console.log('str',str)
      return str
    }

    // 下拉 触发事件
    function pullDownAction(fn) {
      paginatorData.number = 1
      setTimeout(() => {
        none_data = 1;
        list = [];
        // console.log('下拉-刷新')
        $(".pullUpLabel").html("上拉加载更多!");
        list = allList.slice(0, paginatorData.size)
        ajaxData.innerHTML = printTableList(list)
        fn()
      }, 1500)
    }

    function pullUpAction(fn) {
      if (list.length === paginatorData.total) { // 已没有更多数据
        // console.log('上拉-已没有更多数据')
        fn()
        return
      }
      // console.log('上拉-刷新')
      setTimeout(() => {
        paginatorData.number++
        var size = paginatorData.number * paginatorData.size
        // console.log('paginatorData', paginatorData)
        size = Math.max(size, 0)
        size = Math.min(size, paginatorData.total)
        // console.log('size', size)
        list = allList.slice(0, size)
        ajaxData.innerHTML = printTableList(list)

        if (paginatorData.total > list.length) {
          none_data = 1;
        } else {
          none_data = 0;
        }
        // if (none_data == 0) {
        //   $(".pullUpLabel").html("已没有更多数据!");
        // }
        fn()
      }, 1500)

    }


  </script>
</body>

</html>